<template>
  <div class="collect">
    <div class="sights-collect" v-loading="sightsCollectLoading">
      <MiniTitleView :title="'景点收藏'"></MiniTitleView>
      <div v-if="sightsCollectList.length !== 0">
        <div class="container">
          <div
            class="item"
            v-for="item in sightsCollectList"
            :key="item.id"
            @click="$router.push(`/sightsDetail/${item.sightsId}`)"
          >
            <img :src="item.cover" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          v-show="sightsCollectList.length > 0"
          layout="prev, pager, next"
          :total="sightsCollectTotal"
          :current-page="sightsCollectCurrentPage"
          :page-size="sightsCollectPageSize"
          @current-change="handleSightsCollectCurrentChange"
          :page-count="7"
          style="text-align: right; margin-top: 24px"
        >
        </el-pagination>
      </div>
      <el-empty v-else description="暂无收藏"></el-empty>
    </div>
    <div class="hotel-collect" v-loading="hotelCollectLoading">
      <MiniTitleView :title="'酒店收藏'"></MiniTitleView>
      <div v-if="hotelCollectList.length !== 0">
        <div class="container">
          <div
            class="item"
            v-for="item in hotelCollectList"
            :key="item.id"
            @click="$router.push(`/hotelDetail/${item.hotelId}`)"
          >
            <img :src="item.cover" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          v-show="hotelCollectList.length > 0"
          layout="prev, pager, next"
          :total="hotelCollectTotal"
          :current-page="hotelCollectCurrentPage"
          :page-size="hotelCollectPageSize"
          @current-change="handleHotelCollectCurrentChange"
          :page-count="7"
          style="text-align: right; margin-top: 24px"
        >
        </el-pagination>
      </div>
      <el-empty v-else description="暂无收藏"></el-empty>
    </div>
  </div>
</template>

<script>
import MiniTitleView from "@/components/MiniTitleView.vue";
import { getHotelCollectList, getSightsCollectList } from "@/api/user/collect";

export default {
  name: "Collect",
  props: ["id"],
  components: {
    MiniTitleView,
  },
  data() {
    return {
      sightsCollectList: [],
      sightsCollectPage: 1,
      sightsCollectPageSize: 10,
      sightsCollectTotal: 0,
      sightsCollectCurrentPage: 1,
      sightsCollectLoading: false,

      hotelCollectList: [],
      hotelCollectPage: 1,
      hotelCollectPageSize: 10,
      hotelCollectTotal: 0,
      hotelCollectCurrentPage: 1,
      hotelCollectLoading: false,
    };
  },
  created() {
    this.getSightsCollectList();
    this.getHotelCollectList();
  },
  methods: {
    // 获取景点收藏列表
    async getSightsCollectList() {
      try {
        this.sightsCollectLoading = true;
        const res = await getSightsCollectList({
          page: this.sightsCollectPage,
          pageSize: this.sightsCollectPageSize,
          userId: this.id,
        });
        this.sightsCollectList = res.data.records;
        this.sightsCollectTotal = res.data.total;
      } catch {
        this.$message.error("获取列表失败");
      } finally {
        this.sightsCollectLoading = false;
      }
    },
    // 分页
    handleSightsCollectCurrentChange(page) {
      this.sightsCollectPage = page;
      this.sightsCollectCurrentPage = page;
      this.getSightsCollectList();
    },
    // 获取酒店收藏列表
    async getHotelCollectList() {
      try {
        this.hotelCollectLoading = true;
        const res = await getHotelCollectList({
          page: this.hotelCollectPage,
          pageSize: this.hotelCollectPageSize,
          userId: this.id,
        });
        this.hotelCollectList = res.data.records;
        this.hotelCollectTotal = res.data.total;
      } catch {
        this.$message.error("获取列表失败");
      } finally {
        this.hotelCollectLoading = false;
      }
    },
    // 分页
    handleHotelCollectCurrentChange(page) {
      this.hotelCollectPage = page;
      this.hotelCollectCurrentPage = page;
      this.getHotelCollectList();
    },
  },
};
</script>

<style lang="less" scoped>
.collect {
  .sights-collect {
    padding: 2px 0 4px;
    box-shadow: 0 0 10px #ccc;
  }
  .hotel-collect {
    margin-top: 20px;
    padding: 2px 0 4px;
    box-shadow: 0 0 10px #ccc;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20px;
    .item {
      position: relative;
      margin: 10px;
      min-width: 180px;
      width: 30%;
      height: 90px;
      border-radius: 8px;
      cursor: pointer;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        transition: all 0.3s;
      }
      &:hover {
        &::before {
          background-color: rgba(0, 0, 0, 0.4);
        }
        span {
          opacity: 1;
        }
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        font-size: 14px;
        color: #fff;
        opacity: 0;
        // 超过长度的隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all 0.3s;
      }
    }
  }
}
</style>